<!--
 工单模板导入
 * @Author: Allen
 * @Date: 2021-03-23 15:37:15
 * @Description: 抱怨身处黑暗，不如提灯前行。愿你在自己存在的地方，成为一束光，照亮世界的一角
 * @LastEditTime: 2021-03-26 16:45:06
 * @LastEditors: Allen
 * @FilePath: \dmocdms_webend\src\views\se\maintenanceManagement\repairOrder\orderDetails\MImport.vue
 * @Additional: 附加类容
-->

<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader
      slot="title"
      title="保养项目导入"
      :style-type="$store.state.app.dialogType"
    />
    <div class="fixHeight">
      <div class="left">
        <div class="inp">
          <label>车型：</label>
          <el-input
            v-model="dataForForm.carConfigCode"
            :readonly="true"
          />
        </div>
        <template v-for="opt in optionDatas">
          <el-link :key="opt.repairModeId" @click="loadData(opt)">{{ opt.repairModeName }}</el-link>
        </template>
      </div>
      <div class="right">
        <el-table
          border
          :data="wiData"
          height="185"
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column
            prop="序号"
            align="center"
            type="index"
            label="序号"
            width="100"
          />
          <el-table-column
            prop="wiCode"
            align="center"
            label="工时编码"
            width="180"
          />
          <el-table-column
            prop="repairContent"
            label="维修内容"
            align="center"
            width="180"
          />
          <el-table-column
            prop="saleWorkQty"
            align="center"
            label="工时"
          />
        </el-table>
        <el-table
          border
          :data="partData"
          height="185"
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column
            prop="序号"
            align="center"
            type="index"
            label="序号"
            width="100"
          />
          <el-table-column
            prop="partNo"
            align="center"
            label="备件编码"
            width="180"
          />
          <el-table-column
            prop="partName"
            label="备件名称"
            align="center"
            width="180"
          />
          <el-table-column
            prop="partQty"
            align="center"
            label="数量"
          />
        </el-table>
        <!-- 其他项目 -->
        <el-table
          border
          :data="otherData"
          height="185"
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column
            prop="序号"
            align="center"
            type="index"
            label="序号"
            width="100"
          />
          <el-table-column
            prop="repairOtherCode"
            align="center"
            label="其他项目编码"
            width="270"
          />
          <el-table-column
            prop="otherAmountType"
            label="其他项目名称"
            align="center"
            width="270"
          />
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button
        v-for="comp in tableButtons"
        :key="comp.compKey"
        :type="comp.type"
        :icon="comp.icon"
        :fixed="true"
        @click="comp.clickEvent"
      >{{ comp.text }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { orgApis } from '@/api/caseManagementQuery'
export default {
  name: 'MaintenanceProjectImport',
  components: {
    dialogHeader: () => import('@/components/dialogHeader') // 弹窗标题
  },
  props: {
    popupsVisible: { type: Boolean, default: false },
    dataForForm: { type: Object, default: () => ({}) }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      optionDatas: [],
      selectList: {},
      wiData: [],
      partData: [],
      otherData: [],

      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.save(),
          text: '保存' /* 保存*/,
          position: 'left'
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          clickEvent: () => this.closeEdit(),
          text: '取消' /* 保存*/,
          position: 'left'
        }
      ]
    }
  },
  watch: {
    'popupsVisible': {
      handler(isOpen) {
        if (isOpen) {
          this.getOpt()
        }
      },
      immediate: true
    }
  },
  methods: {
    save() {
      this.$emit('returnData', this.wiData, this.partData, this.otherData)
      this.$emit('update:popupsVisible', false)
    },

    // 加载数据
    loadData(opt) {
      this.selectList = opt
      this.$requestAPI({
        apiUrl: orgApis.importWiSel.APIUrl,
        variables: { repairModeId: opt.repairModeId }
      }).then(res => {
        if (res.result === '1') {
          // 网格赋值
          this.wiData = res.rows
        } else {
          this.$message(res.msg ? res.msg : '')
        }
      }).catch(err => {
        if (err.response.data.msg) {
          this.$message(err.response.data.msg)
        } else {
          this.$message(err.message)
        }
      })
      this.getOtherData(opt)
      this.getPartData(opt)
    },

    // 备件
    getPartData(opt) {
      this.$requestAPI({
        apiUrl: orgApis.importPartSel.APIUrl,
        variables: { repairModeId: opt.repairModeId }
      }).then(res => {
        if (res.result === '1') {
          // 网格赋值
          this.partData = res.rows
        } else {
          this.$message(res.msg ? res.msg : '')
        }
      }).catch(err => {
        if (err.response.data.msg) {
          this.$message(err.response.data.msg)
        } else {
          this.$message(err.message)
        }
      })
    },

    // 其他
    getOtherData(opt) {
      this.$requestAPI({
        apiUrl: orgApis.importOtherSel.APIUrl,
        variables: { repairModeId: opt.repairModeId }
      }).then(res => {
        if (res.result === '1') {
          // 网格赋值
          this.otherData = res.rows
        } else {
          this.$message(res.msg ? res.msg : '')
        }
      }).catch(err => {
        if (err.response.data.msg) {
          this.$message(err.response.data.msg)
        } else {
          this.$message(err.message)
        }
      })
    },
    getOpt() {
      this.$requestAPI({
        apiUrl: orgApis.importWorkOrderName.APIUrl,
        variables: { carTypeCode: this.dataForForm.carConfigCode }
      }).then(res => {
        if (res.result === '1') {
          this.optionDatas = res.rows
        } else {
          this.$message(res.msg ? res.msg : '')
        }
      }).catch(err => {
        if (err.response.data.msg) {
          this.$message(err.response.data.msg)
        } else {
          this.$message(err.message)
        }
      })
    },
    // 关闭弹窗
    closeEdit() {
      this.$emit('update:popups-visible', false)
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ div.fixHeight {
    width: 100%;
    max-height: 500px;
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
  }
  .left {
    max-height: 500px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  div.fixHeight .left {
    width: 40%;
    /* height: 80%; */
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
    border-right: 1px solid #ccc;
  }
  div.fixHeight .right {
    width: 60%;
    /* height: 80%; */
  }

  .inp label {
    width: 30%;
  }
  .inp /deep/.el-input {
    width: 70%;
  }
  .el-link {
    margin-top: 15px;
    border: 1px solid;
    border-radius: 3px;
    box-shadow: -2px -2px 3px #CCC;
  }
  /deep/.el-dialog{
    height: 80%;
  }
</style>
